const app = getApp()
Page({
  data: {
    number: 10000,
    tabText: '每天少刷一小时手机，休息眼睛和脑子',
    canvasImg: ''
  },
  onLoad() {
    this.setData({
      systemInfo: app.globalData.systemInfo
    })
    my.setNavigationBarColor({
      frontColor: '#000000',
      backgroundColor: '#ffffff',
    })
  },
  onCanvasReady() {
    let that = this;
    my.createSelectorQuery().select('#canvas').node().exec((res) => {
      const canvas = res[0].node;
      const ctx = canvas.getContext('2d'); 

      ctx.font = 'bold 13px ZiZhiQuXiMaiTi'
      let text1 = this.data.tabText;
      let yellowTextWidth = this.getStrWidth(ctx, text1)+34;
      console.log(yellowTextWidth)


      // 黄框
      this.roundRect(ctx, 25, 51, yellowTextWidth+10, 44, 6, '#ffffff');
      ctx.beginPath()
      ctx.lineWidth = 2; //线宽
      ctx.roundRect(30, 56, yellowTextWidth, 34, [6], '#000000');
      ctx.stroke();

      this.roundRect(ctx, 31, 57, yellowTextWidth-2, 32, 6, '#FFDC0C');

      const imgLeft = canvas.createImage()
      imgLeft.src = '/images/canvas/icon_left.png'
      imgLeft.onload = () => {
        ctx.drawImage(imgLeft, 36, 67, 6, 5)
      }
      ctx.fillText(text1, 48, 77);

      const imgRight = canvas.createImage()
      imgRight.src = '/images/canvas/icon_right.png'
      imgRight.onload = () => {
        ctx.drawImage(imgRight, yellowTextWidth+17, 67, 6, 5)
      }
      
      ctx.font = '14px ZiZhiQuXiMaiTi'
      let text = '减碳'+this.data.number+'克';
      let greenTextWidth = this.getStrWidth(ctx, text)+37;
      // 白框
      this.roundRect(ctx, 0, 15, greenTextWidth+10, 45, 6, '#ffffff');
      
      // 黑框
      ctx.beginPath()
      ctx.lineWidth = 2; //线宽
      ctx.roundRect(5, 20, greenTextWidth, 35, [6], '#000000');
      ctx.stroke();
      // 绿框
      this.roundRect(ctx, 6, 21, greenTextWidth-2, 33, 6, '#90FF00');
      // 绿框内容
      const imgArrow = canvas.createImage()
      imgArrow.src = '/images/canvas/icon_leftArrow.png'
      imgArrow.onload = () => {
          ctx.drawImage(imgArrow, 10, 25, 44/2, 8/2)
      }

      ctx.fillText(text, 10, 94/2);

      const imgTree = canvas.createImage()
      imgTree.src = '/images/canvas/icon_tree.png'
      imgTree.onload = () => {
          ctx.drawImage(imgTree, greenTextWidth-34, 0, 94/2, 92/2)
      }

      console.log(yellowTextWidth+35)
      setTimeout(() => {
        canvas.toTempFilePath({
          x: 0,
          y: 0,
          width: yellowTextWidth+35,
          height: 100,
          destWidth: yellowTextWidth+35,
          destHeight: 100,
          success(res) {
            that.setData({canvasImg: res.tempFilePath})
              console.log(res)
          },
        })
      }, 1000)
    })
  },

  getStrWidth(ctx, str) {
    var lineWidth = 0
    for (let code of str) {
      lineWidth += ctx.measureText(code).width
    }
    return lineWidth
  },

  drawtext(ctx, t, x, y, w) {
    //参数说明
    //ctx：canvas的 2d 对象，t：绘制的文字，x,y:文字坐标，w：文字最大宽度
    let chr = t.split("")
    let temp = ""
    let row = []

    for (let a = 0; a < chr.length; a++) {
      if (ctx.measureText(temp).width < w && ctx.measureText(temp + (chr[a])).width <= w) {
        temp += chr[a];
      } else {
        row.push(temp);
        temp = chr[a];
      }
    }
    row.push(temp)
    console.log(row);
    for (let b = 0; b < row.length; b++) {
      ctx.fillText(row[b], x, y + (b + 1) * 10); //每行字体y坐标间隔20-就是行间距
    }

  },

  roundRect (ctx, x, y, w, h, r, config) {
    let color = 'transparent'
    if (typeof config === 'string') {
      color = config
    }
    ctx.save()
    // 开始绘制
    ctx.beginPath()
    // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
    if (config.type) {
      if (config.type === 'fill') {
        ctx.fillStyle = config.fillColor || 'transparent';
      } else if (config.type === 'stroke') {
        ctx.fillStyle = config.strokeColor || 'transparent';
      } else if (config.type === 'both') {
        ctx.fillStyle = config.fillColor || 'transparent';
        ctx.setStrokeStyle(config.strokeColor || 'transparent')
      }
    } else {
      ctx.fillStyle = color;
      ctx.strokeStyle = '#000000';
    }
    if (!config.round || config.round.leftTop) {
      // 绘制左上角圆弧
      ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
      // 绘制border-top
      ctx.moveTo(x + r, y)
    } else {
      // 绘制border-top
      ctx.moveTo(x, y + r)
      ctx.lineTo(x, y)
      ctx.lineTo(x + r, y)
    }
    ctx.lineTo(x + w - r, y)
    if (!config.round || config.round.rightTop) {
      // 绘制右上角圆弧
      ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
    } else {
      ctx.lineTo(x + w - r, y)
      ctx.lineTo(x + w, y)
      ctx.lineTo(x + w, y + r)
    }
    // 绘制border-right
    ctx.lineTo(x + w, y + h - r)
    if (!config.round || config.round.rightBottom) {
      // 绘制右下角圆弧
      ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
    } else {
      ctx.lineTo(x + w, y + h - r)
      ctx.lineTo(x + w, y + h)
      ctx.lineTo(x + w - r, y + h)
    }
    // 绘制border-bottom
    ctx.lineTo(x + r, y + h)
    if (!config.round || config.round.leftBottom) {
      // 绘制左下角圆弧
      ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
    } else {
      ctx.lineTo(x + r, y + h)
      ctx.lineTo(x, y + h)
      ctx.lineTo(x, y + h - r)
    }
    // 绘制border-left
    ctx.lineTo(x, y + r)

    if (config.type) {
      if (config.type === 'fill') {
        ctx.fill()
      } else if (config.type === 'stroke') {
        ctx.stroke()
      } else if (config.type === 'both') {
        ctx.stroke()
        ctx.fill()
      }
    } else {
      ctx.fill()
    }

    ctx.closePath()
    // 剪切
    ctx.clip()
    ctx.restore()
  },

  onCanvasReady1() {
    const self = this;
    my.createSelectorQuery().select('#canvas1').node().exec((res) => {
        const canvas = res[0].node;
        const ctx = canvas.getContext('2d');
        self.canvas = canvas;
        self.ctx = ctx;


        const imgTree = canvas.createImage()
        imgTree.src = '/images/canvas/icon_tree.png'
        imgTree.onload = () => {
          console.log(imgTree)
          ctx.drawImage(imgTree, 200, 0, 94/2, 92/2)
        }

        self.draw();
    });
  },
  draw() {
    const ctx = this.ctx;
    // 创建离屏 canvas
    const offCanvas = my.createOffscreenCanvas();
    const offCtx = offCanvas.getContext('2d');
    // 用 离屏canvas 创建 Image
    const image = offCanvas.createImage();
    image.onload = function() {
        offCanvas.width = image.width;
        offCanvas.height = image.height;
        // 将 Image 画到 离屏canvas 上
        offCtx.drawImage(image, 0, 0, offCanvas.width, offCanvas.height);
        // 将 离屏canvas 中的部分内容画到 canvas 上
        ctx.drawImage(offCanvas, 50, 50, 100, 100, 0, 0, 100, 100);
    }
    image.src = 'https://img.alicdn.com/tfs/TB1GvVMj2BNTKJjy0FdXXcPpVXa-520-280.jpg';
  },

  onCanvasReady2() {
    const self = this;
    my.createSelectorQuery().select('#canvas2').node().exec((res) => {
        const canvas = res[0].node;
        const ctx = canvas.getContext('2d');
        self.canvas = canvas;
        self.ctx = ctx;

        // const imgTree = canvas.createImage()
        // imgTree.src = '/images/canvas/bg_yellow.png'
        // imgTree.onload = () => {
        //   console.log(imgTree)
        //   ctx.drawImage(imgTree, 50, 0, 108, 74) // , 50, 0, 50, 50, 74
        // }

        ctx.strokeRect(10, 10, 100, 80)

        ctx.translate(10, 10)
        ctx.strokeRect(10, 10, 80, 60)
        
        // 在当前平移基础上再次叠加平移
        // ctx.translate(30, 30)
        // ctx.strokeRect(20, 10, 100, 80)
        // self.draw();
    });
  },
});
